<template>
  <view class="wrap" style="background-color: #f0f0f0;">
    <u-card
      class="breadCrumb"
      :show-head="false"
      :show-foot="false"
      padding="20"
      :border="false"
    >
      <ul slot="body">
        <li @tap="backToHome">
          <u-icon name="home" color="#999" size="small"></u-icon>
          <span>首页</span>
          <u-icon name="arrow-right-double" color="#999" size="small"></u-icon>
        </li>
        <li>
          <span @tap="backToList">{{ detail.type_name }}</span>
          <u-icon name="arrow-right-double" color="#999" size="small"></u-icon>
        </li>
        <li><span>商品详情</span></li>
      </ul>
    </u-card>
    <!-- <u-gap height="30"></u-gap> -->
    <u-card
      :border-radius="30"
      :border="false"
      class="goodsDetails"
      :foot-border-top="false"
    >
      <u-image
        width="100%"
        class="img"
        height="750rpx"
        :src="detail.pic | formatInner"
        slot="head"
      ></u-image>
      <u-row class="price-wrap" slot="body">
        <u-col
          class="price"
          span="6"
          v-html="priceFormat(detail.price)"
        ></u-col>
        <u-col span="6" text-align="right" v-if="footerstr != undefined">
          <view @tap="showFootStr">
            <u-icon name="phone"></u-icon>咨询热线
          </view>
        </u-col>
      </u-row>
      <view class="goodsTitle" slot="foot">
        <p>{{ detail.title }}</p>
        <view class="tags">
          <view
            v-for="(item, index) in (detail.keywords || '').split(',')"
            :key="index"
          >
            <u-tag v-if="item != ''" :text="item" type="error"></u-tag>
          </view>
        </view>
      </view>
    </u-card>

    <!-- <u-gap height="32" bg-color="#f0f0f0"></u-gap> -->
    <u-card class="buy-methods" :border-radius="30" :border="false">
      <u-section
        title="采购说明"
        :right="false"
        slot="head"
        :fontSize="30"
      ></u-section>
      <view class="tit" slot="body">
        <u-time-line>
          <u-time-line-item nodeTop="2">
            <template v-slot:node>
              <view class="u-node" style="background: #19be6b">
                <u-icon name="scan" color="#fff" :size="24"></u-icon>
              </view>
            </template>
            <template v-slot:content>
              <view>
                <view class="u-order-title"
                  >长按二维码，识别二维码跳转到京东商城。</view
                >
              </view>
            </template>
          </u-time-line-item>
          <u-time-line-item nodeTop="2">
            <template v-slot:node>
              <view class="u-node" style="background: #19be6b">
                <u-icon name="phone" color="#fff" :size="24"></u-icon>
              </view>
            </template>
            <template v-slot:content>
              <view>
                <view class="u-order-title">{{ footerstr }}</view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
      </view>
    </u-card>

    <!-- <u-gap height="32" bg-color="#f0f0f0"></u-gap> -->
    <u-card
      class="goods-intro"
      :border="false"
      :border-radius="30"
      :show-foot="false"
    >
      <u-section
        title="商品详情"
        :right="false"
        slot="head"
        :fontSize="30"
      ></u-section>
      <view class="intro-content" slot="body">
        <u-lazy-load
          :loading-img="loadingImg"
          v-for="(item, index) in detailImgs"
          :image="item | fullImgPath"
          :key="index"
          threshold="1440"
        ></u-lazy-load>
        <view style="text-align: center" class="last_qrocde">
          <img :src="qrCode | fullImgPath" v-if="showQrCode" />
        </view>
        <h2 style="text-align: center">
          <span style="color: #e03e2d">采购请长按图片—识别二维码</span>
        </h2>
      </view>
    </u-card>

    <view style="background-color: #e4e7ed; margin-top: 30px">
      <p style="text-align: center">
        {{ footerstr }}
      </p>
    </view>

    <ScrollTop :scrollTopVal="scrollTopVal"></ScrollTop>

    <view class="fixedBottom">
      <u-button type="success" shape="circle" @tap="showFootStr">
        <u-icon name="phone-fill"></u-icon> 专员咨询热线
      </u-button>
      <u-button type="error" shape="circle" @tap="buyVisable = true">
        <u-icon name="scan"></u-icon>京东商城商品码
      </u-button>
    </view>
    <u-mask
      :show="buyVisable"
      @tap="buyVisable = false"
      class="qr-mask"
      :duration="100"
    >
      <view class="qr-code">
        <view @tap.stop>
          <u-image :src="qrCode | fullImgPath"></u-image>
          <p>长按此二维码，可跳转至京东商城</p>
        </view>
      </view>
    </u-mask>
  </view>
</template>

<script>
import loadingImg from '@/static/loadingImg.gif'
import uParse from '@/components/u-parse/u-parse.vue'
import ScrollTop from '@/components/ScrollTop/scrollTop'
import { getGoodsById } from '@/utils/goods.js'
import { publicApi } from '@/utils/public.js'

export default {
  data () {
    return {
      detail: [],
      calldata: {},
      footerstr: '',
      scrollTopVal: undefined,
      salerVisble: false,
      buyVisable: false,
      qrCode: undefined,
      salephone: '',
      detailImgs: [],
      loadingImg: loadingImg,
      parentName: null,
      showQrCode: false,
      shopId:'',
      typeId:'',
      salerId:'',
      name:''
    }
  },
  components: {
    uParse,
    ScrollTop
  },
  filters: {
    fullImgPath: function (imgPath) {
      if (imgPath) {
        if (imgPath.indexOf('__kb/kfile') > -1) {
          return imgPath
        } else {
          return (
            'http://39.100.33.196:9999' +
            imgPath +
            '?SiteId=2d86a613-7c24-6eae-731e-7aab57900d32'
          )
        }
      } else {
        return ''
      }
    },
    formatInner: function (path) {
      if (path) {
        if (path.substring(0, 1) === '[') {
          return (
            'http://jd.youyuanren.net:9999/__kb/kfile' + JSON.parse(path)[0].url
          )
        } else {
          return path
        }
      }
    }
  },
  methods: {
    priceFormat (price) {
      if (price) {
        if (price.toString().indexOf('.') > -1) {
          let arrPrice = price.split('.')
          return '￥' + `<span>${arrPrice[0]}</span>.` + arrPrice[1]
        } else {
          return '￥' + price + '.00'
        }
      }
    },
    backToHome () {
      // this.$u.route({
      //   url: 'pages/index/index',
      //   params: {
      //     salerId: this.$route.query.salerId,
      //     shopId: this.$route.query.shopId
      //   }
      // })
      uni.switchTab({
        url:'/pages/index/index?salerId='+this.salerId+'&shopId='+this.shopId
      })
    },
    backToList () {
      // this.$u.route({
      //   url: 'pages/index/list',
      //   params: {
      //     typeId: this.detail.type_id,
      //     typeName: this.detail.type_name,
      //     salerId: this.$route.query.salerId,
      //     shopId: this.$route.query.shopId
      //   }
      // })
      console.log(123);
      uni.navigateTo({
        url:'/pages/list/list?typeId='+this.typeId+'&typeName='+this.name+'&salerId='+this.salerId+'&shopId='+this.shopId
      })
    },
    showFootStr () {
      uni.makePhoneCall({
        phoneNumber: this.salephone
      })

      this.buyVisable = false
    },
    getObjectKeys (object) {
      let values = []
      for (let property in object) values.push(object[property])
      return values
    }
  },
  onPageScroll (e) {
    this.scrollTopVal = e.scrollTop
  },
  onLoad (options) {
    console.log(options)
    this.shopId=options.shopId
    this.typeId=options.id
    this.salerId=options.salerId
    this.name=options.typeName
    getGoodsById({
      params: JSON.stringify({
        id: options.id,
        shopId: options.shopId,
        isFront: 1
      })
    }).then(res => {
      console.log(res)
      this.detail = res.data[0]
      // console.log(this.detail);
      let test = this.detail.intro
      // console.log(test)
      //旧数据
      if (test.indexOf('</p>') > -1) {
        let allImgSrc = test.match(/src=".*?"/g).toString()
        let allImgPath = allImgSrc.match(/\"[^\"]*\"/g)
        this.detailImgs = allImgPath.map((item, i) => {
          return (item = item.substring(1, item.length - 1))
        })
        this.qrCode = this.detailImgs[0]
      } else {
        //新数据
        if (test.substring(test.length - 3) != '"}]') {
          test = test + '"}]'
        }
        this.detailImgs = JSON.parse(test).map(item => {
          return (item = this.apiUrl + '__kb/kfile' + item.url)
        })
        this.qrCode =
          this.apiUrl + '__kb/kfile' + JSON.parse(res.data[0].qrcode)[0].url
        this.showQrCode = true
      }
    })

    publicApi({
      params: JSON.stringify({
        salerId: this.salerId,
        shopId: this.shopId,
        isFront: 1
      })
    }).then(res => {
      this.footerstr = res.footerstr
      this.salephone = res.salephone
    })
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f4f4f4;
}

.wrap {
  // padding: 32rpx 32rpx 150rpx;

  .u-card {
    margin: 0 !important;
  }

  /deep/ .breadCrumb {
    margin-top: 20rpx;
    font-size: 26rpx;

    ul {
      padding-left: 0;
      list-style: none;
      display: flex;
      align-items: center;
      color: #666;

      li {
        display: flex;
        align-items: center;

        .u-icon {
          margin: 0 10rpx;
        }

        &:last-child {
          span {
            color: #fd2f3d;
          }
        }
      }
    }
  }

  /deep/ .goodsDetails {
    .u-card__head,
    .u-card__body {
      padding-bottom: 0 !important;
    }

    .u-image__image {
      & > div {
        background-size: contain !important;
      }
    }

    .goodsTitle {
      p {
        font-size: 30rpx;
        color: #333;
        text-align: justify;
        word-break: break-word;
      }

      .tags {
        display: flex;
        align-items: center;
        overflow-x: scroll;
        margin: 20rpx 0 10rpx 0;

        .u-tag {
          margin-right: 10rpx;
        }
      }
    }

    .price {
      color: #ff3838;
      font-weight: bold;

      span {
        font-size: 40rpx;
      }
    }
  }

  /deep/ .buy-methods {
    .u-card__body {
      padding-bottom: 10rpx !important;

      .u-time-axis {
        padding: 0 !important;

        .u-time-axis-node {
          left: 22rpx;

          .u-node {
            width: 44rpx;
            height: 44rpx;
            border-radius: 100rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #d0d0d0;
          }
        }

        .u-order-title {
          color: #666;
          font-size: 30rpx;
          line-height: 44rpx;
          margin-left: 50rpx;
        }

        &:before {
          display: none;
        }
      }
    }
  }

  /deep/ .goods-intro {
    .u-card__body {
      padding: 0 0 40rpx 0 !important;
    }

    .intro-content {
      .u-wrap {
        &:first-of-type {
          display: flex;
          justify-content: center;
          background: #fff;

          .u-lazy-item {
            // width: 100%;
            height: 300rpx;
            margin: 30rpx 0;
          }
        }
      }

      .u-lazy-item {
        width: calc(100vw - 64rpx) !important;
      }
    }

    .last_qrocde {
      display: flex;
      justify-content: center;
      background-color: #fff;

      img {
        width: 300rpx !important;
        height: 300rpx;
        margin: 30rpx 0;
      }
    }
  }

  /deep/ .fixedBottom {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    z-index: 99998;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 32rpx;

    .u-btn {
      height: 70rpx;
    }

    .u-icon {
      margin-right: 5rpx;
    }
  }

  /deep/ .qr-mask {
    .qr-code {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      > view {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        line-height: 60rpx;
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .u-image {
      width: 400rpx !important;
      height: 400rpx !important;
    }
  }
}
</style>
